<template>
  <div class="dashboard-wrap">
       <div class="f-s-b">
           <div v-for="item,ix in dataType" class="f1 m10" >
               <div class="mb10 c6 f14">{{item.title}}</div>
               <div class="f-s-b">
                   <div class="f-f-c-c f1  mr10" :class="'box'+ ix " >
                       <span class="mb20 f-c">
                        <img class="wh20 mr10" :src="item.url1" alt="">
                        {{item.c1}}
                       </span>
                       <span> {{item.n1}}</span>
                   </div>
                   <div class="f-f-c-c f1 box0" :class="'box'+ ix ">
                       <span class="mb20 f-c">
                        <img class="wh20 mr10 " :src="item.url2" alt="">
                        {{item.c2}}</span>
                       <span>{{item.n2}} </span>
                   </div>
               </div>
               <div class="f-f-c-c box0 mt10" :class="'box'+ ix ">
                    <span class="mb20 f-c">
                      <img class="wh20 ml10 mr10" :src="item.url2" alt="">
                      {{item.c3}}</span>
                    <span> {{item.n3}}</span>
                </div>
           </div>
      </div>
      <div>
           <div class="f-s-b" >
              <span>回收数据统计(KG)</span>
              <div >
                  <el-radio-group v-model="charParams.type" class="mr10" @input="radioChange">
                    <el-radio-button label="1">昨日</el-radio-button>
                    <el-radio-button label="2">今日</el-radio-button>
                    <el-radio-button label="3">本周</el-radio-button>
                    <el-radio-button label="4">本月</el-radio-button>
                    <el-radio-button label="5">根据日期查询</el-radio-button>
                  </el-radio-group>
                  <el-date-picker
                 v-if="charParams.type == 5"
                  class="mr10"
                  v-model="charParams.time"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
                <el-button type="primary" size="mini" @click="search">查询</el-button>
             </div>
           </div>

              <el-row >
                 <chart :chartData="chartData"></chart>
              </el-row>

           <div>
          </div>
      </div>
  </div>
</template>

<script>
import { countUser, getSalesStatement, getTodayAndYesterdaySales, getSalesByHour, storageList } from '@/api/dashboard/dashboard'
import { getRecoveryChartVOList, getRecoveryCount } from '@/api/dashboard/dashboard'

import chart from './chart.vue'
var echarts = require('echarts')
import store from '@/store'
export default {
  components: { chart },
  data() {
    return {
      date1: null,
      radio1: '1',
      charParams: {
        type: 4,
        time: new Date()
      },
      dataType: [
        { title: '回收统计', u1: 'g1', u2: 'g2', c1: '回收种类', c2: '今日回收(KG)', c3: '回收累计(KG)',
          n1: '50', n2: '1,300,00', n3: '63,356,00',
          url1: require('@/assets/images/g1.png'),
          url2: require('@/assets/images/g2.png')
        },
        { title: '回收站统计', u1: 'p1', u2: 'p2', c1: '回收站数量', c2: '回收站今日订单', c3: '回收站累计订单',
          n1: '50', n2: '1,300,00', n3: '63,356,00',
          url1: require('@/assets/images/p1.png'),
          url2: require('@/assets/images/p2.png')
        },
        { title: '回收员统计', u1: 'b1', u2: 'b2', c1: '回收员数量', c2: '回收员今日订单', c3: '回收员累计订单',
          n1: '50', n2: '1,300,00', n3: '63,356,00',
          url1: require('@/assets/images/b1.png'),
          url2: require('@/assets/images/b2.png')
        },
        { title: '用户统计', u1: 'y1', u2: 'y1', c1: '今日用户数量', c2: '本周用户数量', c3: '总用户数量',
          n1: '50', n2: '1,300,00', n3: '63,356,00',
          url1: require('@/assets/images/y1.png'),
          url2: require('@/assets/images/y1.png')
        }
      ],
      storageLists: [], // 仓库列表
      storageId: '', // 仓库id
      saleStorageId: '', // 销售排行卡片对应的仓库
      saleInfoStorageId: '', // 今日销售情况的对应仓库Id
      countUserData: [], // 用户数量统计数据(根据是否显示更多 判断条数)
      countUserOriginData: [], // 用户数量统计数据
      todayAndYesterdaySalesData: [{}, {}], // 近两日销售情况
      salesStatementData: [], // 销售情况报表数据(根据是否显示更多 判断条数)
      salesStatementOriginData: [], // 销售情况报表数据
      salesByHourData: [], // 按小时统计的报表
      todyUserShowMore: 0, // 今日用户数 是否显示更多
      todyUserShowMoreText: '显示更多',
      todySortShowMore: 0, // 今日排行 是否显示更多
      todySortShowMoreText: '显示更多',
      value: '',
      chartData: [],
      dayTableData: {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['销售额', '销售单数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00']
        },
        yAxis: [{
          name: '销售额',
          type: 'value'
          // min: 90,
          // max: 240,
          // splitNumber: 10,
          // interval: 15
        }, {
          name: '销售单数',
          type: 'value'
          // min: 0,
          // max: 10,
          // splitNumber: 10,
          // interval: 1
        }],
        series: [
          {
            name: '销售额',
            type: 'line',
            // itemStyle: { normal: { label: { show: true }}},
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '销售单数',
            type: 'line',
            yAxisIndex: 1,
            // itemStyle: { normal: { label: { show: true }}},
            data: [3, 6, 7, 8, 9, 3, 5]
          }
        ]

      }
    }
  },
  created() {
    // this.getStorageList()
    // this.countUser()
    // this.getTodayAndYesterdaySales(this.storageId)
    // this.getSalesStatement(this.storageId)
    // this.getSalesByHour(this.storageId)
    this.getRecoveryChartVOList()
    this.getRecoveryCount()
  },
  methods: {

    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    },
    async getStorageList() {
      const lists = await storageList()
      this.storageLists = lists.data
    },
    async countUser(data) {
      const lists = await countUser(data)
      this.countUserOriginData = lists.data
      if (this.todyUserShowMore) {
        this.countUserData = lists.data
      } else {
        this.countUserData = lists.data.slice(0, 2)
      }
    },
    async getTodayAndYesterdaySales(data) {
      const lists = await getTodayAndYesterdaySales(data)
      this.todayAndYesterdaySalesData = lists.data
    },
    salesStatementDataCheck(data) {
      // 销售报表返回的数据 top排行可能为空 为空时设置为空对象
      data.forEach(element => {
        for (var i = 0; i < 5; i++) {
          if (!element.salesTopDTOs[i]) {
            element.salesTopDTOs[i] = {
              'skuId': '',
              'spuId': '',
              'title': '无',
              'totalSales': 0,
              'totalSalesVolume': 0
            }
          }
        }
      })
    },
    async getSalesStatement(data) {
      const lists = await getSalesStatement(data)
      this.salesStatementDataCheck(lists.data)
      this.salesStatementOriginData = lists.data
      if (!this.todySortShowMore) {
        this.salesStatementData = lists.data.slice(0, 5)
      } else {
        this.salesStatementData = lists.data
      }
    },
    search() {
      this.getRecoveryChartVOList()
    },
    radioChange(val) {
      console.log(val, 'val')
      this.getRecoveryChartVOList()
    },
    getRecoveryChartVOList() {
      getRecoveryChartVOList(this.charParams).then(response => {
        console.log(response.data, 'response')
        this.chartData = response.data
      }).finally(() => {
      })
    },
    getRecoveryCount() {
      getRecoveryCount().then(response => {
        console.log(response.data, 'response')
        // this.chartData = response.data
        this.dataType[0].n1 = response.data.recoveryTypeNum
        this.dataType[0].n2 = response.data.recoveryWeightToday
        this.dataType[0].n3 = response.data.recoveryWeightHistory
        this.dataType[1].n1 = response.data.recoveryBinNum
        this.dataType[1].n2 = response.data.orderToday
        this.dataType[1].n3 = response.data.orderHistory
        this.dataType[2].n1 = response.data.recoveryPersonNum
        this.dataType[2].n2 = response.data.orderToday
        this.dataType[2].n3 = response.data.orderHistory
        this.dataType[3].n1 = response.data.userToday
        this.dataType[3].n2 = response.data.userWeek
        this.dataType[3].n3 = response.data.userCount
      }).finally(() => {
      })
    },
    salesByHourDataFn(data) {
      // 根据返回的小时统计信息 设置折线图的数据
      const xArr = ['02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
      this.dayTableData.xAxis.data = xArr.slice(0, data.length)
      const totalSales = []
      const totalSalesVolume = []
      data.forEach(item => {
        totalSales.push(item.totalSales)
        totalSalesVolume.push(item.totalSalesVolume)
      })
      this.dayTableData.series[0].data = totalSalesVolume
      this.dayTableData.series[1].data = totalSales
    },
    async getSalesByHour(data) {
      const lists = await getSalesByHour(data)
      this.salesByHourData = lists.data
      this.salesByHourDataFn(lists.data)
      const dayTable = echarts.init(document.getElementById('dayTable'))
      dayTable.setOption(this.dayTableData)
    },
    todyUserMore() {
      // 如果没有更多数据了 就提示没有更多了
      if (this.countUserData.length === this.countUserOriginData.length && !this.todyUserShowMore) {
        this.$notify({
          title: '提示',
          message: '没有更多数据了',
          type: 'success'
        })
        return false
      }
      // 今日用户数显示更多
      if (!this.todyUserShowMore) {
        this.todyUserShowMoreText = '收起'
        this.todyUserShowMore = 1
        this.countUserData = Object.assign([], this.countUserOriginData)
      } else {
        this.todyUserShowMoreText = '显示更多'
        this.todyUserShowMore = 0
        this.countUserData = this.countUserData.slice(0, 2)
      }
    },
    salesStatementMore() {
      // 如果没有更多数据了 就提示没有更多了
      if (this.salesStatementData.length === this.salesStatementOriginData.length && !this.todySortShowMore) {
        this.$notify({
          title: '提示',
          message: '没有更多数据了',
          type: 'success'
        })
        return false
      }
      if (!this.todySortShowMore) {
        this.todySortShowMoreText = '收起'
        this.todySortShowMore = 1
        this.salesStatementData = Object.assign([], this.salesStatementOriginData)
      } else {
        this.todySortShowMoreText = '显示更多'
        this.todySortShowMore = 0
        this.salesStatementData = this.salesStatementData.slice(0, 5)
      }
    },
    todySalesFilter(val) {
      this.getSalesStatement(val)
    },
    todySalesInfoFilter(val) {
      this.getTodayAndYesterdaySales(val)
      this.getSalesByHour(val)
    },
    todyUserFilter() {
      this.countUser()
    }

  }
}
</script>

<style   scoped>
.dashboard-wrap{
  padding:20px;
}
  .item{
    margin-top:60px;
  }
  .item>div{
    text-align:center;
    margin:12px 0px;
  }
  .item>div:nth-child(1){
    font-size:16px;
    color:#333;
  }
  .item>div:nth-child(3){
    color:#aaa;
  }
  .blue{
    color:#268FF9;
    font-size:20px;
  }
  .green{
    color:#75B530;
    font-size:20px;
  }
  .salesStatementName{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .name-wrapper-number>span:nth-child(1){
    font-size:12px;
  }
  .name-wrapper-number>span:nth-child(2){
    font-size:16px;
  }
  .name-wrapper-number>span:nth-child(4){
    font-size:16px;
  }
  .box0,.box1,.box2,.box3{
    /* width: 189px; */
    height: 100px;
    background: rgba(68,201,156,0.1);
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid rgba(68,201,156,0.34);
    color: #44C99C;
  }
  .box1{
    background: rgba(135,124,255,0.1);
    color: #877CFF;
    border: 1px solid rgba(135,124,255,0.34);
  }

  .box2{
    background: rgba(26,149,255,0.1);
    color: #1A95FF;
    border: 1px solid rgba(26,149,255,0.34);
  }
  .box3{
    background: rgba(255,156,36,0.1);
    color: #FF9C24;
    border: 1px solid rgba(255,156,36,0.34);
  }
</style>
